<template>
  <view class="flex flex-column justify-between" id="container">
    <view>
      <view class="mt-20">
        <sub-title class="mt-20" title="基础信息"></sub-title>
        <OrderBasicDetail :basicData="workOrderInfo" />
      </view>

      <view class="mt-20">
        <sub-title class="mt-20" title="设备信息"></sub-title>
        <view class="p-lr-40 mb-20">
          <view class="fz-30 lh-42  mt-20 flex justify-between align-center">
            <text class="fz-32 color-FF6262 w-14">*</text><text class="w-200 min-w-200 color-333333 font-bold">设备名称</text>
            <view class="flex1 text-right color-888888 break-all">
              <text>{{ workOrderInfo.deviceName || '-' }}</text>
            </view>
          </view>
          <view class="fz-30 lh-42 mt-20 flex justify-between align-center">
            <text class="w-200 min-w-200 color-333333 font-bold pl-14">设备编号</text>
            <view class="flex1 text-right color-888888 break-all">
              <text>{{ workOrderInfo.deviceNo || '-' }}</text>
            </view>
          </view>
          <view class="fz-30 lh-42 mt-20 flex justify-between align-center">
            <text class="w-180 min-w-180 color-333333 font-bold pl-14">分组房间</text>
            <view class="flex1 text-right color-888888 break-all">
              <text>{{ workOrderInfo.roomName || '-' }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="mt-20">
        <sub-title class="mt-20" title="故障内容"></sub-title>
        <view class="p-lr-40 mb-20">
          <view class="fz-30 lh-42 mt-20">
            <text class="fz-32 color-FF6262 w-14">*</text><text class="w-200 color-333333 font-bold">故障描述</text>
            <view class="break-all mt-10">
              <text class="color-888888">{{ workOrderInfo.description || '暂无描述' }}</text>
            </view>
          </view>

          <view class="fz-30 lh-42 mt-20 ">
            <text class="w-200 color-333333 font-bold">拍照</text>
            <view class="flex flex-wrap mt-20">
              <!-- 图片缩略图 -->
              <view class="relative mr-30 mt-20" v-for="(item, index) in workOrderInfo.imageList" :key="index">
                <image class="h-150 w-150" :data-cur="item.url" :src="item.url" @tap="previewImage" />
              </view>

              <view v-if="!workOrderInfo.imageList || workOrderInfo.imageList.length === 0"
                class="w-150 h-150 bg-CCCCCC flex flex-column align-center justify-center">
                <image class="w-47 h-40" src="@/static/images/common/empty.png"></image>
                <text class="color-fff fz-24 lh-33 mt-10">暂无图片</text>
              </view>
            </view>
          </view>

          <view class="fz-30 lh-42 mt-20 flex justify-between">
            <text class="fz-32 color-FF6262 w-14">*</text><text class="w-200 color-333333 font-bold">报修人</text>
            <view class="flex1 flex text-right align-center justify-end color-888888">
              <text>{{ workOrderInfo.initiator || '-fff' }}</text>
            </view>
          </view>

          <view class="fz-30 lh-42 mt-20 flex justify-between">
            <text class="w-200 color-333333 font-bold">报修时间</text>
            <view class="flex1 text-right">
              <text class="color-888888">
                {{ workOrderInfo.createTime || '-' }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <view class="mt-20" v-if="showOrderCause">
        <sub-title class="mt-20" :title="showOrderCause"></sub-title>
        <view class="p-lr-40 mb-20">
          <view class="fz-30 lh-42 mt-20">
            <text class="w-200 color-333333 font-bold">{{ showOrderCause }}</text>
            <view class="break-all mt-10">
              <text class="color-888888">{{ workOrderInfo.workOrderReason || '-' }}</text>
            </view>
          </view>
        </view>
      </view>

    </view>


    <view class="h-176 sticky bottom0 bg-fff pl-50 fz-28 color-fff lh-60 border-top-EEEEEE" v-if="status === TO_REPAIR || status === SEEK_HELP || status === SUSPEND">
      <view v-if="status === TO_REPAIR" class="flex justify-between align-center mt-30">
        <view class="h-60 w-120 br-5 border-2D8CF0 text-center bg-2D8CF0 mr-50" @tap="edit">
          <text>编辑</text>
        </view>
        <view class="h-60 w-120 br-5 border-2D8CF0 text-center bg-2D8CF0 mr-50" @tap="transfer">
          <text>转派</text>
        </view>
      </view>
      <view v-if="status === SEEK_HELP || status === SUSPEND" class="flex justify-end">
        <view class="mt-30 h-60 w-120 br-5 border-2D8CF0 fz-28 color-fff lh-60 text-center bg-2D8CF0 mr-50"
          @tap="transfer">
          <text>转派</text>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
import subTitle from "@/components/SubTitle/SubTitle";
import OrderBasicDetail from "../order-basic-detail.vue";
import { workOrderDetail } from "@/api/repair/workOrder"

import { REP_WORK_ORDER_STATUS } from "@/utils/dict"

export default {
  name: "RepairInfo",
  components: {
    subTitle, OrderBasicDetail
  },
  props: {
    workOrderId: {
      type: String,
      required: true
    },
  },
  created () {
    this.init()
  },
  data () {
    return {
      status:'',
      workOrderInfo: {},
    }
  },
  computed: {
    TO_REPAIR () { return REP_WORK_ORDER_STATUS.TO_REPAIR.value },
    SEEK_HELP () { return REP_WORK_ORDER_STATUS.SEEK_HELP.value },
    SUSPEND () { return REP_WORK_ORDER_STATUS.SUSPEND.value },
    showOrderCause() {
      if( this.workOrderInfo.status === REP_WORK_ORDER_STATUS.REJECTED.value ){
        return '拒绝理由'
      }
      if(this.workOrderInfo.status === REP_WORK_ORDER_STATUS.SEEK_HELP.value){
        return '求助原因'
      }
      return ''
    }
  },
  methods: {
    init () {
      workOrderDetail(this.workOrderId).then(res => {
        this.workOrderInfo = res.data || {}
        this.status = this.workOrderInfo.status
      })
    },
    edit () {
      this.$emit('edit')
    },
    //转派
    transfer () {
      const orderData = {
        responsibleStaffIds:this.workOrderInfo.responsibleStaffIds,
        responsibleStaff:this.workOrderInfo.responsibleStaff,
        repairStaff:this.workOrderInfo.repairStaff,
        staffIds:this.workOrderInfo.staffIds,
        handbook: this.workOrderInfo.handbook
      }
      this.$tab.navigateTo(`/pages/repair/receive-order?orderData=${encodeURIComponent(JSON.stringify(orderData))}&workOrderId=${this.workOrderInfo.workOrderId}&hospitalId=${this.workOrderInfo.hospitalId}&companyId=${this.workOrderInfo.companyId}&isTransfer=true`)
    },
    previewImage (e) {
      const current = e.currentTarget.dataset.cur;
      const urls = this.workOrderInfo.imageList.map(el => el.url);
      uni.previewImage({
        current: current,
        urls: urls,
        indicator: "none",
      });
    },
  },
}
</script>
<style>
page {
  background-color: #fff;
}
</style>
